<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书列表</title>
    <link rel="stylesheet" href="../css/Book Information.css">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
    <!-- <script src="../js/Public Section.js"></script> -->
</head>

<body>

    <!--背景-->
    <div class="all">
    <!-- 左手边菜单栏 -->
        <div class="h left_Menu_Bar Center">
            <div class="Menu_Bar Center">
                <!-- 头像 -->
                <div class="avatar">
                    <!-- 默认头像 -->
                    <h1>读</h1>
                </div>
                <!-- 菜单 -->
                <div class="Menu Font">
                    <ul class="Center ct">
                        <li><a href="#">用户管理</a></li>
                        <li>
                            <a href="#">借阅管理</a> <button class="btn" id="btn"><i class="bx bx-chevron-down"
                                    id="arrow"></i></button>
                        </li>
                        <!-- 下拉菜单 -->
                        <div class="box " id="dropdown">
                            <ul class="drop_down_menu Center">
                                <li><a href="../html/borrow.html">借阅</a></li>
                                <li><a href="../html/return.html">归还</a></li>
                                <li><a href="#">记录</a></li>
                                <li><a href="expire.php">过期</a></li>
                            </ul>
                        </div>

                        <li><a href="#">图书列表</a></li>

                    </ul>
                </div>
            </div>
        </div>
        <!-- <div class="h bodyed"> -->
        <!-- 白色背景 -->
        <div class="Background">
            <!-- 标题 -->
            <h1 class="title">图书列表
                <div class="top"><input type="text" placeholder="请输入编号/书名"><a href="#"><img src="../image/搜索 (1).png" alt=""></a></div>
            </h1>
            <div class="banner_top">
                <ul>
                    <li class="header">排序：</li>
                    <li class="sons"><a href="">综合</a></li>
                    <li><a href="">最新</a></li>
                    <li><a href="">最热</a></li>
                    <li><a href="">高分</a></li>
                    <li><a href="">更多</a></li>
                    <button><img src="../image/向下.png" alt=""></button>
                </ul>
                <ul>
                    <li class="header">类型：</li>
                    <li class="sons"><a href="">全部</a></li>
                    <li><a href="">欢乐</a></li>
                    <li><a href="">战争</a></li>
                    <li><a href="">武侠</a></li>
                    <li><a href="">更多</a></li>
                    <button><img src="../image/向下.png" alt=""></button>
                </ul>
                <ul>
                    <li class="header">年份：</li>
                    <li class="sons"><a href="">2024</a></li>
                    <li><a href="">2023</a></li>
                    <li><a href="">2022</a></li>
                    <li><a href="">2021</a></li>
                    <li><a href="">更多</a></li>
                    <button><img src="../image/向下.png" alt=""></button>
                </ul>
            </div>
            <div class="all_book">
                <div class="book_box">
                    <div class="book"></div>
                    <ul>
                        <li>书名: XXX</li>
                        <li>作者: XXX</li>
                        <li>出版日期: XXX</li>
                        <li>内容: XXX</li>
                        <li>位置: XXX</li>
                    </ul>
                </div>
                <div class="book_box">
                    <div class="book"></div>
                    <ul>
                        <li>书名: XXX</li>
                        <li>作者: XXX</li>
                        <li>出版日期: XXX</li>
                        <li>内容: XXX</li>
                        <li>位置: XXX</li>
                    </ul>
                </div>
                <div class="book_box">
                    <div class="book"></div>
                    <ul>
                        <li>书名: XXX</li>
                        <li>作者: XXX</li>
                        <li>出版日期: XXX</li>
                        <li>内容: XXX</li>
                        <li>位置: XXX</li>
                    </ul>
                </div>
                <div class="book_box">
                    <div class="book"></div>
                    <ul>
                        <li>书名: XXX</li>
                        <li>作者: XXX</li>
                        <li>出版日期: XXX</li>
                        <li>内容: XXX</li>
                        <li>位置: XXX</li>
                    </ul>
                </div>
                <div class="book_box">
                    <div class="book"></div>
                    <ul>
                        <li>书名: XXX</li>
                        <li>作者: XXX</li>
                        <li>出版日期: XXX</li>
                        <li>内容: XXX</li>
                        <li>位置: XXX</li>
                    </ul>
                </div>
                <div class="book_box">
                    <div class="book"></div>
                    <ul>
                        <li>书名: XXX</li>
                        <li>作者: XXX</li>
                        <li>出版日期: XXX</li>
                        <li>内容: XXX</li>
                        <li>位置: XXX</li>
                    </ul>
                </div>
                <div class="book_box">
                    <div class="book"></div>
                    <ul>
                        <li>书名: XXX</li>
                        <li>作者: XXX</li>
                        <li>出版日期: XXX</li>
                        <li>内容: XXX</li>
                        <li>位置: XXX</li>
                    </ul>
                </div>
                <div class="book_box">
                    <div class="book"></div>
                    <ul>
                        <li>书名: XXX</li>
                        <li>作者: XXX</li>
                        <li>出版日期: XXX</li>
                        <li>内容: XXX</li>
                        <li>位置: XXX</li>
                    </ul>
                </div>
                <div class="book_box">
                    <div class="book"></div>
                    <ul>
                        <li>书名: XXX</li>
                        <li>作者: XXX</li>
                        <li>出版日期: XXX</li>
                        <li>内容: XXX</li>
                        <li>位置: XXX</li>
                    </ul>
                </div>
            </div>
            <div class="foot-2">
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button style="width: 80px;height: 36px;">下一页></button>
            </div>
        </div>
    </div>

</div>
</body>

</html>

<script src="../js/Book Information.js"></script>